<template>
  <div>
    <div>
      <p v-html="comment.content" class="content"></p>
      <button type="button" class="btn btn-reply" @click="replying = true" v-if="!replying">回复</button>
      <button
        type="button"
        class="btn see-reply"
        @click="load_replies"
        v-if="$listeners['load-replies']"
      >
        <span>{{see_reply_btn_triangle}}</span>
        {{see_reply_btn_value}}
      </button>
    </div>

    <CommentInput
      v-if="replying"
      label="发送"
      @send="(c)=>$emit('send',c)"
      @cancel="replying = false"
    ></CommentInput>
  </div>
</template>

<script>
import CommentInput from "./CommentInput";
export default {
  name: "CommentBody",
  components: { CommentInput },
  props: {
    comment: {
      required: true,
      type: Object,
    },
  },
  data: () => ({
    replying: false,
    see_reply_btn_value: "查看答复",
    see_reply_btn_display: false,
    see_reply_btn_triangle: "▼",
  }),
  methods: {
    load_replies() {
      if (!this.see_reply_btn_display) {
        this.see_reply_btn_value = "收起答复";
        this.see_reply_btn_display = true;
        this.see_reply_btn_triangle = "▲";
        this.$emit("load-replies");
      } else {
        this.see_reply_btn_value = "查看答复";
        this.see_reply_btn_display = false;
        this.see_reply_btn_triangle = "▼";
        this.$emit("hide-replies");
      }
    },
  },
};
</script>

<style>
.content {
  margin: 0;
}
.btn {
  font-size: 92%;
}
.see-reply {
  color: #007bff;
}
.see-reply:hover {
  color: #007bff;
}
.see-reply span {
  font-size: 20%;
  margin-right: 10px;
}
.btn-reply {
  color: #00000091;
}
</style>